import { Row, Col, Switch, Tag, DatePicker, Calendar, Button, Popover, Tooltip } from 'antd';
import { WeaDialog, WeaNewScroll } from 'ecCom';
import { WeaTableNew } from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
const MonthPicker = DatePicker.MonthPicker;

import { inject, observer } from 'mobx-react';
import { observable, action, toJS } from 'mobx';

import { WeaLocaleProvider} from 'ecCom';
import moment from 'moment';
const getLabel = WeaLocaleProvider.getLabel;

@inject('meetingCalView')
@inject('meetingDialog')

@observer
export default class LeftContainer extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			date: new Date(),
			num: 0,
		};
	}
	componentWillMount(){
		const { status,doInit} = this.props.meetingCalView
		const { type } = toJS(status)
		doInit()
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.date !== nextProps.date) {
			this.setState({ date: nextProps.date });
		}
	}

	componentDidMount(){
		// console.log('height====',jQuery(this.leftCRef).height())
		// console.log('height====',jQuery('.ant-fullcalendar-fullscreen').height())
	}

	shouldComponentUpdate(nextProps, nextState) {
		//组件渲染控制
		return true;
	}

	render() {
		const { loading } = this.props;

		let { status, comsWeaTableStore,doInit,isCalendar } = this.props.meetingCalView;
		let { dataKey, type,weekStartDay } = toJS(status);
		const getLocale =   {
				firstDayOfWeek: weekStartDay,
				lang: {
					format: {
						eras: [getLabel(383357,"公元前"), getLabel(383358,"公元")],
						months: [getLabel(1492,"一月"), getLabel(1493,"二月"), getLabel(383385,"三月"), getLabel(383387,"四月"), getLabel(1496,"五月"), getLabel(383392,"六月"),
							getLabel(383393,"七月"), getLabel(383394,"八月"), getLabel(383395,"九月"), getLabel(383396,"十月"), getLabel(383397,"十一月"), getLabel(383398,"十二月")],
						shortMonths: [getLabel(1492,"一月"), getLabel(1493,"二月"), getLabel(383385,"三月"), getLabel(383387,"四月"), getLabel(1496,"五月"), getLabel(383392,"六月"),
						getLabel(383393,"七月"), getLabel(383394,"八月"), getLabel(383395,"九月"), getLabel(383396,"十月"), getLabel(383397,"十一月"), getLabel(383398,"十二月")],
						weekdays: [getLabel(24626,"星期天"), getLabel(383399,"星期一"), getLabel(383400,"星期二"), getLabel(383402,"星期三"), getLabel(383403,"星期四"),
							getLabel(383404,"星期五"), getLabel(383405,"星期六")],
						shortWeekdays: [getLabel(16106,"周日"), getLabel(16100,"周一"), getLabel(16101,"周二"), getLabel(16102,"周三"), getLabel(16103,"周四"), getLabel(16104,"周五"),
							getLabel(16105,"周六")],
						veryShortWeekdays: [getLabel(16106,"周日"), getLabel(16100,"周一"), getLabel(16101,"周二"), getLabel(16102,"周三"), getLabel(16103,"周四"), getLabel(16104,"周五"), getLabel(16105,"周六")],
						ampms: [getLabel(383408,"上午"), getLabel(383409,"下午")],
						datePatterns: [`yyyy'${getLabel(383372,"年")}'M'${getLabel(383373,"月")}'d'${getLabel(383374,"日")}' EEEE`, `yyyy'${getLabel(383372,"年")}'M'${getLabel(383373,"月")}'d'${getLabel(383374,"日")}'`, "yyyy-M-d", "yy-M-d"],
						timePatterns: [`ahh'${getLabel(383411,"时")}'mm'${getLabel(383412,"分")}'ss'${getLabel(383414,"秒")}' 'GMT'Z`, `ahh'${getLabel(383411,"时")}'mm'${getLabel(383412,"分")}'ss'${getLabel(383414,"秒")}'`, "H:mm:ss", "ah:mm"],
						dateTimePattern: '{date} {time}'
					}
				},
			}
		
	  //dataKey使用来获取数据的sessionKey
		//type 1:日历，2:表格
		 
		return (
			<div className="leftC" style={{ /*paddingLeft: 210,*/ width: '100%', height: '100%' }} ref={(ref)=>this.leftCRef = ref}>
				<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@scn2pe`} height='100%' className='meeting-calendar-view'>
					<div>
						{
							this.props.children
						}
					</div>
					<div>
						{type == 1 || isCalendar ?
							<Calendar ecId={`${this && this.props && this.props.ecId || ''}_Calendar@9v09ye`}
								dateCellRender={ this.dateCellRender }
								onPanelChange={ this.onPanelChange }
								locale={ getLocale } 
								onSelect={ this.onSelect }
								value={ this.state.date }
								ref={(ref)=>this.calendarRef = ref}
							/>
							:comsWeaTableStore[dataKey]?
							<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@5jd9yd`}
								hasOrder={ true }
								needScroll={ true }
								loading={ loading }
								getColumns={ this.getColumns }
								sessionkey={ dataKey } 
								comsWeaTableStore={ comsWeaTableStore[dataKey] }
							/>
							:''
						}
					</div>
				</WeaNewScroll>
			</div>

		)
	}

	onPanelChange(date, mode) {
	}

	getListData = value => {
		let listData = [];
		let { status } = this.props.meetingCalView;
		let { data } = toJS(status);
		let currentDate = value.getTime();
		currentDate = moment(moment(currentDate).format('YYYY-MM-DD')).valueOf();
		if (data.events && data.events.length == 0) {
			return listData;
		} else {
			data.events && data.events.length !== 0 && data.events.map((item, index) => {
				let beginTime = moment(item.begindate).valueOf();
				let endTime = moment(item.enddate).valueOf();
				
				if(beginTime <= currentDate && currentDate <= endTime) {
					listData.push({
						id: item.id,
						type: 'normal',
						status: item.status,
						content: `${item.begintime} ${item.name}`
					});
				}
			})
		}
		return listData;
	}

	dateCellRender = value => {
		//获取日期框中的数据
		const listData = this.getListData(value);
		var a = 0;
		return (
			<div title="">
				<div style={{ overflow: 'hidden' }}>
					<ul className="events" style={{ height: '66px' }}>
						{
							listData.length != 0 && listData.map((item, index) => {
								a = index;
								return <li key={index} onClick={(e) => { e.stopPropagation();this.props.setAll(item.id, true, 'preview') }} style={{ margin: '2px 0 2px 0', height: '20px' }} className={`metting-calview-calendar-${item.status}`}>
									<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@2ojles@${item.id}`} placement="rightTop" title={<div dangerouslySetInnerHTML={{__html: item.content}}></div>}>
										<a style={{ width: '100%', display: 'inline-block', overflow: 'hidden', color: '#333333', textOverflow: 'ellipsis' }}>
											<span className={`event-${item.status}`} style={{ marginLeft: '5px' }}>●</span>
											<span style={{ whiteSpace: 'nowrap', marginLeft: '5px' }} dangerouslySetInnerHTML={{__html: item.content}}></span>
										</a>
									</Tooltip>
								</li>
							}
							)
						}
					</ul>
				</div>

				<div>
					{
						a > 2 ?
							<Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@lel6q4`}
								className="metting-calview-popover"
								getTooltipContainer={() => document.getElementById('metting-calview-id')}
								placement="rightTop" title=""
								content={<div>
									<ul className="events">
										{
											listData.map((item, index) => {
												return <li style={{cursor: 'pointer'}} key={index} onClick={(e) => {
                          if($('.ant-popover-content')){//点击的时候popover需要关闭
                            $('.metting-calview .ant-popover-content').css('display','none');
                          }
													e.stopPropagation();
													this.props.setAll(item.id, true, 'preview') }} className={`metting-calview-calendar-${item.status}`}>
													<span className={`event-${item.status}`} style={{ marginLeft: '5px' }}>●</span>
													<span style={{ marginLeft: '5px' }} dangerouslySetInnerHTML={{__html: item.content}}>
														{/* {item.content} */}
													</span>
												</li>
											}
											)
										}
									</ul>
								</div>}
								trigger="click"
								onClick={(e) => { e.stopPropagation() }}
							>
								<span
									style={{ fontSize: '12px', color: '#25a7e6', textDecoration: 'underline', marginLeft: '18px' }}
									onClick={() => {
                    if($('.ant-popover-content')){//点击的时候popover需要打开
                      $('.metting-calview .ant-popover-content').css('display','block');
                    }
									}}
								>{getLabel(383306,"显示更多会议")}</span>
							</Popover>

							: ''
					}
				</div>
			</div>

		);
	}
	
	getLocale = ()=>{
		return {
			firstDayOfWeek: 0,
			lang: {
				format: {
					eras: [getLabel(383357,"公元前"), getLabel(383358,"公元")],
					months: [getLabel(1492,"一月"), getLabel(1493,"二月"), getLabel(383385,"三月"), getLabel(383387,"四月"), getLabel(1496,"五月"), getLabel(383392,"六月"),
						getLabel(383393,"七月"), getLabel(383394,"八月"), getLabel(383395,"九月"), getLabel(383396,"十月"), getLabel(383397,"十一月"), getLabel(383398,"十二月")],
					shortMonths: [getLabel(1492,"一月"), getLabel(1493,"二月"), getLabel(383385,"三月"), getLabel(383387,"四月"), getLabel(1496,"五月"), getLabel(383392,"六月"),
					getLabel(383393,"七月"), getLabel(383394,"八月"), getLabel(383395,"九月"), getLabel(383396,"十月"), getLabel(383397,"十一月"), getLabel(383398,"十二月")],
					weekdays: [getLabel(24626,"星期天"), getLabel(383399,"星期一"), getLabel(383400,"星期二"), getLabel(383402,"星期三"), getLabel(383403,"星期四"),
						getLabel(383404,"星期五"), getLabel(383405,"星期六")],
					shortWeekdays: [getLabel(16106,"周日"), getLabel(16100,"周一"), getLabel(16101,"周二"), getLabel(16102,"周三"), getLabel(16103,"周四"), getLabel(16104,"周五"),
						getLabel(16105,"周六")],
					veryShortWeekdays: [getLabel(16106,"周日"), getLabel(16100,"周一"), getLabel(16101,"周二"), getLabel(16102,"周三"), getLabel(16103,"周四"), getLabel(16104,"周五"), getLabel(16105,"周六")],
					ampms: [getLabel(383408,"上午"), getLabel(383409,"下午")],
					datePatterns: [`yyyy'${getLabel(383372,"年")}'M'${getLabel(383373,"月")}'d'${getLabel(383374,"日")}' EEEE`, `yyyy'${getLabel(383372,"年")}'M'${getLabel(383373,"月")}'d'${getLabel(383374,"日")}'`, "yyyy-M-d", "yy-M-d"],
					timePatterns: [`ahh'${getLabel(383411,"时")}'mm'${getLabel(383412,"分")}'ss'${getLabel(383414,"秒")}' 'GMT'Z`, `ahh'${getLabel(383411,"时")}'mm'${getLabel(383412,"分")}'ss'${getLabel(383414,"秒")}'`, "H:mm:ss", "ah:mm"],
					dateTimePattern: '{date} {time}'
				}
			},
		}
	}

	onSelect = getDate=> {
		const {  onlySaveDate, canCreate } = this.props.meetingCalView;
		this.setState({ date: new Date(getDate.time) });
		let date = new Date(getDate.time);
		onlySaveDate(date);
		// 点击日历，弹出新建
		canCreate && this.props.setAll('', true, 'create') 
	}

	getColumns = (e) => {
		let newColumns = '';
		newColumns = e.map(column => {
			let newColumn = column;
			newColumn.render = (text, record, index) => { //前端元素转义
				let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
				return (
					newColumn.dataIndex == 'name' ?
						<a className="wea-url-name" style={{ cursor: 'pointer' }} 
						  onClick={() => {
								       this.props.setAll(record.id, true, 'preview')
							       }} 
							dangerouslySetInnerHTML={{ __html: valueSpan }} />
						:
						<div className="wea-url" dangerouslySetInnerHTML={{ __html: valueSpan }} />
				)
			}
			return newColumn;
		});
		return newColumns;
	}

}

